<!-- 首页 -->
<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swiper">
      <el-carousel height="500px" v-if="ifWidth > '768'">
        <el-carousel-item v-for="item in 4" :key="item">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            src="../assets/img/home/u13.png"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
      <!-- 手机端 -->
      <el-carousel height="350px" v-if="ifWidth < '768'">
        <el-carousel-item v-for="item in 4" :key="item">
          <img
            style="width: 100%; height: 100%; object-fit: cover"
            src="../assets/img/home/u13.png"
            alt=""
            srcset=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 通知公告 -->
    <div class="notice">
      <div class="notice-tit">
        <img
          class="notice-tit-icon"
          src="../assets/img/home/notice.svg"
          alt=""
        />
        <span class="notice-tit-text">通知公告</span>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="mode">
      <div class="mode-con">
        <div class="mode-con-tit">
          <div class="mode-con-tit-bg"></div>
          <div class="mode-con-tit-text">
            <div><span style="font-weight: bold">新闻</span>资讯</div>
             <div class="hidden-lg" style="font-size: 18px;">更多</div>
          </div>
        </div>
        <!-- 小屏幕隐藏 -->
        <div class="mode-con-classify hidden-xs">
          <div class="mode-con-classify-item">集团要闻</div>
          <div class="mode-con-classify-item">成员动态</div>
          <div class="mode-con-classify-item">党建动态</div>
          <div class="mode-con-classify-item">生产经营动态</div>
        </div>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <div class="news">
      <div class="news-bg"></div>
      <div class="news-img">
        <el-carousel height="350px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img
              style="width: 100%; height: 100%; object-fit: cover"
              src="../assets/img/home/u13.png"
              alt=""
              srcset=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="news-list">
        <div class="news-list-title">
          <div style="font-size: 20px;font-weight: bold;">新闻资讯</div>
          <div class="hidden-xs">更多</div>
        </div>
        <el-scrollbar style="height: 100%">
          <div v-for="item in 10" :key="item" class="new-list-item">
            <div class="new-list-item-tit">
              <div class="NLIT-text">
                集团承办浙建集团2024年桥式起重机（行车）操作技能竞赛
              </div>
              <div class="NLIT-des">
                集团承办浙建集团2024年桥式起重机（行车）操作技能竞赛
              </div>
            </div>
            <div class="new-list-item-time">10-11 15:43</div>
          </div>
        </el-scrollbar>
      </div>
      <div class="news-list-b">
        <div class="news-list-title">
          <div style="font-size: 20px;font-weight: bold;">核心成员单位</div>
          <div>更多</div>
        </div>
        <el-scrollbar style="height: 100%">
          <div v-for="item in danwei" :key="item" class="new-list-item">
            <div class="new-list-item-tit">
              <div class="NLIT-text" style="margin-top: 10px;">
                {{item}}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <div class="mode">
      <div class="mode-con">
        <div class="mode-con-tit">
          <div class="mode-con-tit-bg"></div>
          <div class="mode-con-tit-text">
            <div><span style="font-weight: bold">板块</span>业务</div>
             <div class="hidden-lg" style="font-size: 18px;">更多</div>
          </div>
        </div>
        <div class="mode-con-classify hidden-xs">
          <div class="mode-con-classify-item">建筑施工</div>
          <div class="mode-con-classify-item">基建投资</div>
          <div class="mode-con-classify-item">工业制造</div>
          <div class="mode-con-classify-item">海外发展</div>
          <div class="mode-con-classify-item">现代服务业</div>
        </div>
      </div>
    </div>

    <!-- 板块业务 -->
    <div class="business">
      <div v-for="item in 10" :key="item" class="business-item">
        <div class="business-item-img">
          <img
            class="business-item-img-img"
            src="../assets/img/home/u162.png"
            alt=""
            srcset=""
          />
        </div>
        <div class="business-item-text">
          <span
            >建筑施工板块，主要由集团总部和旗下浙江省建工集团、浙江省一建建设集团、浙江省二建建设集团、浙江省三建建设集团、浙江省工业设备安装集团、浙江省交建集团、浙江省美丽乡村公司为主担当</span
          >
        </div>
      </div>
    </div>

    <!-- 专题栏目 -->
    <!-- <div class="mode">
      <div style="border: none" class="mode-con">
        <div class="mode-con-tit">
          <div class="mode-con-tit-bg"></div>
          <div class="mode-con-tit-text">
            <span style="font-weight: bold">专题</span>栏目
          </div>
        </div>
      </div>
    </div>

    <div class="column">
      <div
        class="column-list"
        :style="{ transform: 'translateX(' + offsetLeft + 'px)' }"
      >
        <div class="column-list-item" v-for="item in 10" :key="item">
          <img
            class="column-list-item-img"
            src="../assets/img/home/u200.png"
            alt=""
          />
        </div>
      </div>

      <div class="column-list-left" @click="leftShift">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="column-list-right" @click="rightShift">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div> -->

    <div style="height: 30px"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  name: "home",
  data() {
    return {
      offsetLeft: 0, // 专题栏目的向左的偏移量
      ifWidth: "",
      danwei: ['浙江省建工集团有限责任公司', '浙江省一建建设集团有限公司', '浙江省二建建设集团有限公司', '浙江省三建建设集团有限公司', '新疆塔建三五九建工有限责任公司', '中国浙江建设国际集团有限公司',]
    };
  },
  created() {
    this.getWidth();
  },
  methods: {
    /************** 专题栏目 ****************/
    //#region
    /**往左移动 */
    leftShift() {
      console.log("leftShift");
      this.offsetLeft += 320;
      if (this.offsetLeft > 0) {
        this.offsetLeft = 0;
      }
    },

    rightShift() {
      console.log("rightShift");
      this.offsetLeft -= 320;
    },
    //#endregion

    getWidth() {
      this.ifWidth = $(document.body).width();
    },
  },
};
</script>

<style lang='css' scoped>
.home {
  padding: 0 0px;
  box-sizing: border-box;
}

/**轮播图 */
.swiper {
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
}

/**消息通知 */
.notice {
  padding: 20px;
  box-sizing: border-box;
}

.notice-tit {
  display: flex;
  align-items: center;
}

.notice-tit-icon {
  margin-top: -2px;
  width: 15px;
  height: 15px;
}

.notice-tit-text {
  margin-left: 5px;
}

/**功能模块 */
.mode {
  margin-top: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.mode-con {
  border-bottom: 4px solid #bbbbbb;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.mode-con-tit {
  position: relative;
  font-size: 30px;
  color: #0000bf;
  padding: 20px 0 10px;
}

.mode-con-tit-bg {
  position: absolute;
  top: 5px;
  left: -10px;
  height: 40px;
  width: 70px;
  background: rgba(200, 200, 255, 0.7);
  border-radius: 20px;
}

.mode-con-tit-text {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mode-con-classify {
  display: flex;
  margin-bottom: 5px;
}

.mode-con-classify-item {
  position: relative;
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  filter: drop-shadow(5px 5px 10px #c4c4ff);
  cursor: pointer;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.mode-con-classify-item:hover {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
  font-size: 16px;
}

.mode-con-classify-item::before {
  position: absolute;
  left: -10px;
  height: 100%;
  display: block;
  content: "";
  border-right: 5px solid #fff;
  border-bottom: 20px solid #fff;
  border-top: 20px solid transparent;
  border-left: 5px solid transparent;
}

.mode-con-classify-item:hover::before {
  border-right-color: var(--theme-color);
  border-bottom-color: var(--theme-color);
}

.mode-con-classify-item::after {
  position: absolute;
  right: -10px;
  height: 100%;
  display: block;
  content: "";
  border-left: 5px solid #fff;
  border-top: 20px solid #fff;
  border-bottom: 20px solid transparent;
  border-right: 5px solid transparent;
}

.mode-con-classify-item:hover::after {
  border-left-color: var(--theme-color);
  border-top-color: var(--theme-color);
}

/**新闻咨询 */
.news {
  position: relative;
  padding: 30px 50px;
  box-sizing: border-box;
  display: flex;
}

.news-bg {
  z-index: -1;
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 100%;
  height: 100%;
  /* background: url("../assets/img/home/u2.png") no-repeat; */
  background-position: right bottom;
  opacity: 0.2;
}

.news-bg-img {
  width: 100%;
  height: 100%;
}

.news-img {
  width: 500px;
  border-radius: 5px;
  overflow: hidden;
}

.news-list {
  padding: 0px 30px;
  box-sizing: border-box;
  height: 350px;
  overflow: hidden;
}
.news-list-title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #0000bf;
}
.news-list-b {
  padding: 0px 30px;
  box-sizing: border-box;
  height: 350px;
  width: 30%;
  overflow: hidden;
}
.new-list-item {
  display: flex;
  line-height: 2;
}

.NLIT-text {
  font-size: 16px;
}

.NLIT-des {
  font-size: 14px;
  color: #959595;
}

.new-list-item-time {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/**板块业务 */
.business {
  padding: 10px 40px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
}

.business-item {
  width: 18%;
  /* height: 300px; */
  margin: 20px auto 0;
}

.business-item-img {
  width: 100%;
  height: 150px;
}

.business-item-img-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-item-text {
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 12px;
  text-indent: 2em;
}

.column {
  position: relative;
  height: 150px;
  overflow: hidden;
}

.column-list {
  height: 100%;
  display: flex;
  transition: transform 0.3s;
}

.column-list-left {
  left: 10px;
}

.column-list-right {
  right: 10px;
}

.column-list-left,
.column-list-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  background: red;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  background: rgba(200, 200, 255, 0.3);
  color: #b1b1b1;
}

.column-list-item {
  flex-shrink: 0;
  margin: 0 10px;
  width: 300px;
  height: 100%;
  background: red;
}

.column-list-item:first-of-type {
  margin-left: 0;
}

.column-list-item:last-of-type {
  margin-right: 0;
}

.column-list-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .mode-con-classify-item::before {
  display: block;
  position: absolute;
  left: 0;
  width: 0px;
  height: 100%;
  content: '';
  border: 4px solid red;
} */

/* 媒体查询手机 */
@media screen and (max-width: 768px) {
  .home {
    padding: 0;
    box-sizing: border-box;
  }

  .swiper {
    border-radius: 0;
  }

  /**功能模块 */
  .mode-con {
    border-bottom: 4px solid #bbbbbb;
    padding: 0;
    box-sizing: border-box;
    display: block;
  }

  .mode-con-classify {
    justify-content: left;
    flex-wrap: wrap;
    margin-bottom: 5px;
  }

  .mode-con-classify-item {
    width: 25%;
    margin-top: 10px;
  }

  /**新闻咨询 */
  .news {
    position: relative;
    padding: 20px 0 0;
    box-sizing: border-box;
    display: block;
  }

  .news-bg-img {
    width: 100%;
    height: 100%;
  }

  .news-img {
    width: 100%;
    border-radius: 0;
  }
  .news-list {
    padding: 20px 30px;
  }
  .news-list-b {
    width: 100%;
    padding: 20px 30px;
  }

  /**板块业务 */
  .business {
    padding: 10px 0px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
  }

  .business-item {
    width: 80%;
    /* height: 300px; */
    margin: 20px auto 0;
  }

  .column {
    width: 90%;
    margin: auto;
    position: relative;
    height: 150px;
    overflow: hidden;
  }
}
</style>

<style lang="">
.el-scrollbar__wrap {
  overflow: auto;
}
</style>
